<template>
	<div class="card-fill layout-padding">
		<el-card shadow="hover" class="layout-padding-auto">
			<el-form ref="formRef" :model="state.vmModel" label-width="100px">
				<el-row>
					<el-col :xs="24" :lg="24" class="mb20">
						<el-form-item
							ref="Mobile_FormItem"
							prop="Mobile"
							:label="$t('message._admin.account.mobile')"
							:rules="[
								{
									required: true,
									message: $t('message._system.common.vm.input', { input: $t('message._admin.account.mobile') }),
									trigger: 'blur',
								},
								{
									pattern: /^1[3456789]\d{9}$/,
									message: $t('message._system.common.vm.mobileformat'),
									trigger: 'blur',
								},
							]"
						>
							<el-input v-model="state.vmModel.Mobile" placeholder="请输入手机号" clearable></el-input>
						</el-form-item>
						<el-form-item
							ref="Code_FormItem"
							prop="Code"
							:label="$t('message._admin.account.smscode')"
							:rules="[
								{
									required: true,
									message: $t('message._system.common.vm.input', { input: $t('message._admin.account.smscode') }),
									trigger: 'blur',
								},
								{
									pattern: /^\d{6}$/,
									message: '验证码为6位数字',
									trigger: 'blur',
								},
							]"
						>
							<div style="display: flex; gap: 10px">
								<el-input v-model="state.vmModel.Code" placeholder="请输入验证码" clearable style="flex: 1"></el-input>
								<el-button type="primary" :disabled="state.countdown > 0" @click="sendSmsCode" style="width: 120px">
									{{ state.countdown > 0 ? `${state.countdown}s` : '发送验证码' }}
								</el-button>
							</div>
						</el-form-item>
						<el-form-item
							ref="NewPassword_FormItem"
							prop="NewPassword"
							:label="$t('message._admin.account.newpassword')"
							:rules="[
								{
									required: true,
									message: $t('message._system.common.vm.input', { input: $t('message._admin.account.newpassword') }),
									trigger: 'blur',
								},
								{
									min: 6,
									max: 50,
									message: '密码长度必须在6-50个字符之间',
									trigger: 'blur',
								},
							]"
						>
							<el-input v-model="state.vmModel.NewPassword" autocomplete="new-password" show-password clearable placeholder="请输入新密码"></el-input>
						</el-form-item>
						<el-form-item
							ref="ConfirmPassword_FormItem"
							prop="ConfirmPassword"
							:label="$t('message._admin.account.confirmpassword')"
							:rules="[
								{
									required: true,
									message: $t('message._system.common.vm.input', { input: $t('message._admin.account.confirmpassword') }),
									trigger: 'blur',
								},
								{
									validator: validateConfirmPassword,
									trigger: 'blur',
								},
							]"
						>
							<el-input
								:placeholder="$t('message._admin.account.confirmpassword')"
								v-model="state.vmModel.ConfirmPassword"
								autocomplete="new-password"
								show-password
								clearable
							></el-input>
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>
			<footer class="el-dialog__footer" style="padding: unset; padding-top: 10px">
				<span class="dialog-footer">
					<el-button type="primary" @click="onSubmit">{{ $t('message._system.common.vm.submit') }}</el-button>
					<el-button @click="onCancel">{{ $t('message._system.common.vm.cancel') }}</el-button>
				</span>
			</footer>
		</el-card>
	</div>
</template>

<script setup lang="ts" name="message._system.common.vm.edit,false">
import ElMessage from 'element-plus/es/components/message/index';
import { reactive, ref, getCurrentInstance, onMounted } from 'vue';
import loginApi from '/@/api/login';
import other from '/@/utils/other';
import { useUserInfo } from '/@/stores/userInfo';
import { useRouter } from 'vue-router';

const emit = defineEmits(['refresh', 'closeDialog']);

// 定义变量内容
const formRef = ref();
const router = useRouter();
const state = reactive({
	vmModel: {
		Mobile: '',
		Code: '',
		NewPassword: '',
		ConfirmPassword: '',
	},
	countdown: 0,
});

const ci = getCurrentInstance() as any;

// 验证确认密码
const validateConfirmPassword = (rule: any, value: string, callback: any) => {
	if (value !== state.vmModel.NewPassword) {
		callback(new Error('两次输入的密码不一致'));
	} else {
		callback();
	}
};

// 发送验证码
const sendSmsCode = () => {
	// 验证手机号
	formRef.value?.validateField('Mobile', (valid: boolean) => {
		if (valid === false) {
			ElMessage.error('请先输入正确的手机号');
			return;
		}

		loginApi()
			.sendVerificationCode(state.vmModel.Mobile, 'changePassword', '')
			.then((res) => {
				if (res.Code === 200) {
					ElMessage.success('验证码发送成功');
					// 开始倒计时
					state.countdown = 60;
					const timer = setInterval(() => {
						state.countdown--;
						if (state.countdown <= 0) {
							clearInterval(timer);
						}
					}, 1000);
				} else {
					ElMessage.error(res.Message);
				}
			})
			.catch(() => {
				ElMessage.error('验证码发送失败');
			});
	});
};

// 打开弹窗
onMounted(() => {});

// 关闭弹窗
const closeDialog = () => {
	emit('closeDialog');
};

// 取消
const onCancel = () => {
	closeDialog();
};

// 提交
const onSubmit = () => {
	formRef.value?.validate((valid: boolean) => {
		if (valid) {
			loginApi()
				.changePasswordBySms(state.vmModel)
				.then((response) => {
					if (response.Code !== 1) {
						ElMessage.success(ci.proxy.$t('message._system.common.vm.submittip'));
						closeDialog();
						useUserInfo().logout();
						router.push('/login');
						ElMessage.success('密码修改成功，请重新登录');
					} else {
						ElMessage.error(response.Message);
					}
				})
				.catch((error: any) => {
					other.setFormError(ci, error);
				});
		}
	});
};

// 暴露变量
defineExpose({});
</script>
